{extend name="layout/index_layout" /}
{block name="css"}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>产品交易平台</title>
    <link rel="stylesheet" href="__HOME_TMPL__/css/mui.css"/>
    <link rel="stylesheet" href="__HOME_TMPL__/css/public.css"/>
    <link rel="stylesheet" href="__HOME_TMPL__/css/choose.css"/>
    <link rel="stylesheet" href="__HOME_TMPL__/css/list.css"/>
{/block}
{block name="body"}
<!--首页内容-->
<div class="content">
    <header class="mui-bar mui-bar-nav">
        <h3 class="mui-title">首页</h3>
        <a class="mui-icon-right-nav mui-pull-right menus" href="javascript:;" style="background: url('__HOME_TMPL__/images/choose.png') no-repeat 49% 14px;background-size: 20%;">
            筛选
        </a>
    </header>
    <div class="mui-content">
        <div>
            <div id="sliderSegmentedControl" class=" mui-segmented-control mui-segmented-control-inverted">
                <a class="mui-control-item mui-active" href="#item2mobile">
                    我是卖家
                    <span style=""></span>
                </a>
                <a class="mui-control-item " href="#item1mobile">
                    我是买家
                    <span style=""></span>
                </a>
            </div>
            <div class="mui-slider-group">
                <div id="item2mobile" class="mui-control-content mui-active">
                    <div class="mui-content">
                        <ul class=" index_pro" id="gongying">
                            {foreach name="type2" item="vt2"}
                            <li class=" mui-row">
                                <a href="{:url('goods/info',['id'=>$vt2['id']])}" class="mui-col-xs-3">
                                    <img src="{$vt2['photo'][0]}" class="img-responsive" alt=""/>
                                </a>
                                <a href="{:url('goods/info',['id'=>$vt2['id']])}" class="mui-col-xs-9">
                                    <p class="index_title">{$vt2.title}<span>{$vt2.spec_name}</span></p>
                                    <p class="index_detial mui-ellipsis">{$vt2.content}</p>
                                    <p><span class="price">￥ {$vt2.price} <em>/{$vt2.unit_name}</em></span><span class="mui-pull-right">{$vt2.time}</span></p>
                                </a>
                            </li>
                            {/foreach}
                            <!--<li class=" mui-row">-->
                            <!--<a href="info_list.html" class="mui-col-xs-3"><img src="__HOME_TMPL__/images/pro1.jpg" class="img-responsive" alt=""/></a>-->
                            <!--<a href="info_list.html" class="mui-col-xs-9">-->
                            <!--<p class="index_title">陕西洛川红富士苹果<span>70mm以上</span><span>纸袋</span></p>-->
                            <!--<p class="index_detial mui-ellipsis">陕西洛川红富士苹果,陕西洛川红富士苹果陕西洛川红富士苹果陕西洛川红富士苹果</p>-->
                            <!--<p ><span class="price">￥ 58.00 <em>/箱</em></span><span class="mui-pull-right">2小时前</span></p>-->
                            <!--</a>-->
                            <!--</li>-->
                        </ul>
                    </div>
                </div>
                <div id="item1mobile" class="mui-control-content">
                    <div class="mui-content">
                        <ul class=" index_pro" id="qiugou">
                            {foreach name="type1" item="vt1"}
                                <li class=" mui-row">
                                    <a href="{:url('goods/info',['id'=>$vt1['id']])}" class="mui-col-xs-3">
                                        <img src="{$vt1['photo'][0]}" class="img-responsive" alt=""/>
                                    </a>
                                    <a href="{:url('goods/info',['id'=>$vt1['id']])}" class="mui-col-xs-9">
                                        <p class="index_title">{$vt1.title}<span>{$vt1.spec_name}</span></p>
                                        <p class="index_detial mui-ellipsis">{$vt1.content}</p>
                                        <p><span class="price">￥ {$vt1.price} <em>/{$vt1.unit_name}</em></span><span class="mui-pull-right">{$vt1.time}</span></p>
                                    </a>
                                </li>
                            {/foreach}
                            <!--<li class=" mui-row">-->
                                <!--<a href="info_list.html" class="mui-col-xs-3"><img src="__HOME_TMPL__/images/pro1.jpg" class="img-responsive" alt=""/></a>-->
                                <!--<a href="info_list.html" class="mui-col-xs-9">-->
                                    <!--<p class="index_title">陕西洛川红富士苹果<span>70mm以上</span><span>纸袋</span></p>-->
                                    <!--<p class="index_detial mui-ellipsis">陕西洛川红富士苹果,陕西洛川红富士苹果陕西洛川红富士苹果陕西洛川红富士苹果</p>-->
                                    <!--<p ><span class="price">￥ 58.00 <em>/箱</em></span><span class="mui-pull-right">2小时前</span></p>-->
                                <!--</a>-->
                            <!--</li>-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</div>
<!--筛选-->
<div class="choose" style="display: none;">
    <div class="mui-content">
        <form action="" method="post" class="sub">
            <div class="mui-row">
                <!--产品种类-->
                <div class="mui-col-xs-12">
                    <div class="mui-row">
                        <div class="mui-col-xs-12 choose_title">
                            <span>选择产品种类</span>
                        </div>
                        <div class="mui-col-xs-12">
                            <div class="mui-row choose_list">
                                {foreach name="floor0" item="vf0" key="k"}
                                <div class="mui-col-xs-4" onclick="floor0('{$vf0.id}')">
                                    <label class="class_list">
                                        {if condition="$k == 0"}
                                        <input type="radio" name="types" value="{$vf0.id}" checked />
                                        {else /}
                                        <input type="radio" name="types" value="{$vf0.id}"  />
                                        {/if}
                                        <em>{$vf0.name}</em>
                                    </label>
                                </div>
                                {/foreach}
                                <!--<div class="mui-col-xs-4">-->
                                    <!--<label class="class_list">-->
                                        <!--<input type="radio" name="types" value="1" checked>-->
                                        <!--<em>苹果</em>-->
                                    <!--</label>-->
                                <!--</div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <!--产品分类-->
                <div class="mui-col-xs-12">
                    <div class="mui-row">
                        <div class="mui-col-xs-12 choose_title">
                            <span>产品分类</span>
                        </div>
                        <div class="mui-col-xs-12">
                            <div class="mui-row choose_list" id="floor1">
                                {foreach name="floor1" item="vf1" key="k"}
                                <div class="mui-col-xs-4" onclick="floor1('{$vf1.id}')">
                                    <label class="class_list">
                                        {if condition="$k == 0"}
                                        <input type="radio" name="classs" value="{$vf1.id}" checked />
                                        {else /}
                                        <input type="radio" name="classs" value="{$vf1.id}"  />
                                        {/if}
                                        <em>{$vf1.name}</em>
                                    </label>
                                </div>
                                {/foreach}
                                <!--<div class="mui-col-xs-4">-->
                                    <!--<label class="class_list">-->
                                        <!--<input type="radio" name="classs" value="1" >-->
                                        <!--<em>红富士</em>-->
                                    <!--</label>-->
                                <!--</div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <!--产品规格-->
                <div class="mui-col-xs-12">
                    <div class="mui-row">
                        <div class="mui-col-xs-12 choose_title">
                            <span>产品规格</span>
                        </div>
                        <div class="mui-col-xs-12">
                            <div class="mui-row choose_list" id="floor2">
                                {foreach name="spec" item="vs" key="k"}
                                <div class="mui-col-xs-4">
                                    <label class="class_list">
                                        {if condition="$k == 0"}
                                        <input type="radio" name="specs" value="{$vs.id}" checked />
                                        {else /}
                                        <input type="radio" name="specs" value="{$vs.id}"  />
                                        {/if}
                                        <em>{$vs.name}</em>
                                    </label>
                                </div>
                                {/foreach}
                                <!--<div class="mui-col-xs-4">-->
                                    <!--<label class="class_list">-->
                                        <!--<input type="radio" name="giuge" value="1" >-->
                                        <!--<em>65mm</em>-->
                                    <!--</label>-->
                                <!--</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <footer id="footers">
        <button type="button" class="cancel">取消</button>
        <button type="button" class="ok">确定</button>
    </footer>
</div>
<script src="__HOME_TMPL__/js/mui.js"></script>
<script src="__HOME_TMPL__/js/jquery-3.1.1.min.js"></script>
<script src="__HOME_TMPL__/js/jquery.cookie.js"></script>
<!--<script src="__HOME_TMPL__/js/public.js"></script>-->
<script>
    $(function(){
            $('.index').css("color","#28AE3D");
            $('.index img').attr("src","/templete/HomeThemes/itkee/resources/images/footer_1_1.png");
            console.log($('.my img').attr("src"));
        $('.index_pro img').height($('.index_pro img').width());
    })

    $('.menus').click(function(){
        $('.content').hide(500).next().show();
        if($('.choose').css("display")=="block"){
            $('body,html').css("background","#ffffff").find('.choose .mui-content').css("background","#ffffff");
        }
    })

    //根据种类查找下级分类
    function floor0(id) {
        $.ajax({
            url: "{:url('index/index')}",
            data: {"floor0_id": id,'type':1},
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                var obj2 = data.data;
                var obj3 = data.spec;
                var content = "";
                var content1 = "";
                var arr1 = [];
                var arr2 = [];
                if (data.code == 1) {
                    $.each(obj2, function (idx, data) {
                        var id = data.id;
                        var name = data.name;
                        if(idx == 0){
                            content = '<div class="mui-col-xs-4" onclick="floor1('+id+')">'
                                + '<label class="class_list">'
                                + '<input type="radio" name="classs" value="'+id+'" checked />'
                                + '<em>'+name+'</em>'
                                + '</label>'
                                + '</div>'
                        }else{
                            content = '<div class="mui-col-xs-4" onclick="floor1('+id+')">'
                                + '<label class="class_list">'
                                + '<input type="radio" name="classs" value="'+id+'" />'
                                + '<em>'+name+'</em>'
                                + '</label>'
                                + '</div>'
                        }
                        arr1.push(content);
                    });

                    $.each(obj3, function (idx, data) {
                        var id = data.id;
                        var name = data.name;
                        if(idx == 0){
                            content1 = '<div class="mui-col-xs-4">'
                                + '<label class="class_list">'
                                + '<input type="radio" name="specs" value="'+id+'" checked />'
                                + '<em>'+name+'</em>'
                                + '</label>'
                                + '</div>'
                        }else{
                            content1 = '<div class="mui-col-xs-4">'
                                + '<label class="class_list">'
                                + '<input type="radio" name="specs" value="'+id+'" />'
                                + '<em>'+name+'</em>'
                                + '</label>'
                                + '</div>'
                        }
                        arr2.push(content1);
                    });

                    $("#floor1").html(arr1.join(''));
                    $("#floor2").html(arr2.join(''));
                }
            }, error: function (error) {
                alert("网络异常");
            }
        })
    }

    //根据分类查找下级规格
    function floor1(id) {
        $.ajax({
            url: "{:url('index/index')}",
            data: {"floor1_id": id,'type':2},
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                var obj2 = data.data;
                var content = "";
                var arr1 = [];
                if (data.code == 1) {
                    $.each(obj2, function (idx, data) {
                        var id = data.id;
                        var name = data.name;
                        content = '<div class="mui-col-xs-4">'
                            + '<label class="class_list">'
                            + '{if condition="$k == 0"}'
                            + '<input type="radio" name="specs" value="'+id+'" checked />'
                            + '{else /}'
                            + '<input type="radio" name="specs" value="'+id+'"  />'
                            + '{/if}'
                            + '<em>'+name+'</em>'
                            + '</label>'
                            + '</div>'
                        arr1.push(content);
                    });
                    $("#floor2").html(arr1.join(''));
                } else {

                }
            }, error: function (error) {
                alert("网络异常");
            }
        })
    }

    //筛选查询
    $(function(){
        $('input').change(function(){
            if($(this).prop("checked")==true){
                var s= $(this).next().html();
                console.log(s);
            }
        })
        $('.ok').click(function(){
            var types = $("input[name='types']:checked").val();
            var classs = $("input[name='classs']:checked").val();
            var specs = $("input[name='specs']:checked").val();
            $.ajax({
                url: "{:url('index/query')}",
                data: {'type':3,'types':types,'classs':classs,'specs':specs},
                type: 'POST',
                success: function (data) {
                    var content1 = "";
                    var content2 = "";
                    var arr1 = [];
                    var arr2 = [];
                    if (data.code == 1) {
                        // 求购
                        $.each(data.type1, function (idx, obj) {
                            var photo = obj.photo[0];
                            var title = obj.title;
                            var spec_name = obj.spec_name;
                            var content = obj.content;
                            var price = obj.price;
                            var unit_name = obj.unit_name;
                            var time = obj.time;
                            var goods_id = obj.id;
                            var url = "{:url('/index/goods/info/')}"+'?id='+goods_id;
                            content1 = '<li class=" mui-row">'
                                + '<a href='+url+' class="mui-col-xs-3">'
                                + '<img src="'+photo+'" class="img-responsive" alt=""/>'
                                + '</a>'
                                + '<a href='+url+' class="mui-col-xs-9">'
                                + '<p class="index_title">'+title+'<span>'+spec_name+'</span></p>'
                                + '<p class="index_detial mui-ellipsis">'+content+'</p>'
                                + '<p><span class="price">￥ '+price+'<em>/'+unit_name+'</em></span><span class="mui-pull-right">'+time+'</span></p></a></li>'
                            arr1.push(content1);
                        });
                        // 供应
                        $.each(data.type2, function (idx, obj) {
                            var photo = obj.photo[0];
                            var title = obj.title;
                            var spec_name = obj.spec_name;
                            var content = obj.content;
                            var price = obj.price;
                            var unit_name = obj.unit_name;
                            var time = obj.time;
                            var goods_id = obj.id;
                            var url = "{:url('/index/goods/info/')}"+'?id='+goods_id;
                            content2 = '<li class=" mui-row">'
                                + '<a href='+url+' class="mui-col-xs-3">'
                                + '<img src="'+photo+'" class="img-responsive" alt=""/>'
                                + '</a>'
                                + '<a href='+url+' class="mui-col-xs-9">'
                                + '<p class="index_title">'+title+'<span>'+spec_name+'</span></p>'
                                + '<p class="index_detial mui-ellipsis">'+content+'</p>'
                                + '<p><span class="price">￥ '+price+'<em>/'+unit_name+'</em></span><span class="mui-pull-right">'+time+'</span></p></a></li>'
                            arr2.push(content2);
                        });
                        $("#qiugou").html(arr1.join(''));
                        $("#gongying").html(arr2.join(''));
                        $('.choose').hide().prev().show();
                    }
                }, error: function () {
                    mui.alert("网络异常");
                }
            })
        })

        $('.cancel').click(function(){
            $('.choose').hide().prev().show();
        })
    })
</script>
{/block}
{block name="js"}
{/block}
{block name="script"}
{/block}